<template>
	<el-collapse v-model="activeNames">
		<el-collapse-item name="1">
			<template slot="title">
				<el-divider content-position="left">
					<view class="bold-text user-select-none">MController</view>
				</el-divider>
			</template>
			<!-- stateIndex -->
			<el-row>
				<el-col :span="spacing">
					<el-tooltip content="控制器ID" placement="top" effect="light">
					  <view class="">stateIndex</view>
					</el-tooltip>
				</el-col>
				
				<el-col :span="24-spacing">
					 <el-select v-model="treeItemData.mControllerIndex" placeholder="请选择" size="mini" @change="handleChangeStateIndex">
					    <el-option
					      v-for="item in stateIndexOptions"
					      :key="item.value"
					      :label="item.label"
					      :value="item.value">
					    </el-option>
					  </el-select>
				</el-col>
			</el-row>
		</el-collapse-item>
	</el-collapse>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name:"ui-mController",
		props: [
		],
		computed: {
			...mapState({
				uuid: state => state.app.uuid,
				treeItemData: state => state.app.treeItemData,
			})
		},
		data() {
			return {
				activeNames: ['1'],
				spacing: 4,
				stateIndexOptions: [{
				  value: 0,
				  label: '0'
				}, {
				  value: 1,
				  label: '1'
				}, {
				  value: 2,
				  label: '2'
				},{
				  value: 3,
				  label: '3'
				}, {
				  value: 4,
				  label: '4'
				}, {
				  value: 5,
				  label: '5'
				}, {
				  value: 6,
				  label: '6'
				}, {
				  value: 7,
				  label: '7'
				}, {
				  value: 8,
				  label: '8'
				}, {
				  value: 9,
				  label: '9'
				}],
			};
		},
		methods: {
			handleChangeStateIndex(value) {
				this._evalCode(
					"window.pluginSetMControllerData(" +
					"'" + this.uuid + "'," +
					"'" + value + "'" +
					")");
				this._freshNode();
			},
		}
	}
</script>

<style>
	.el-collapse {
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
		border-radius: 4px;
		border: 1px solid #EBEEF5;
		background-color: #FFF;
		overflow: hidden;
		color: #303133;
		-webkit-transition: .3s;
		transition: .3s;
		border-top: none;
		border-bottom: none;
		padding: 0px 15px;
		margin-top: 10px;
	}
</style>